<template>
    <div ref="frontEndChatrPage">
        <div ref="frontEndChart" style="width:210px;height:110px;margin-top:-20px;"></div>
        <div class="frontEnd_progress">
            <span class="progress_times">当前训练任务进度</span>
            <el-progress style="width: 170px;" color="#07AB68" :percentage="trainFrontendData[0].train_progress" 
            v-if="trainFrontendData.length>0" class="progress_bar"></el-progress>
        </div> 
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importTrainData } from '../../../homePage/components/listPage/dataAccess/api/echartsChatApi';
import { trainScreenOption } from '../../../../utils/js/point'
export default {
    data() {
        return {
            allData: [],
            trainFrontendData: [],
            xAxisData: null,
        }
    },
    mounted() {
        this.getTrainDetailData();
    },
    methods: {
       // 获取训练详情数据
        async getTrainDetailData() {
            const res = await importTrainData()
            this.allData = res.data.data
            this.trainFrontendData = res.data.data.filter(item => {
                return item.name === 'V456'
            })
            this.updatechart(); 
        },
        updatechart() {
            var trainDetailData = this.allData.filter(item=>{
                return item.name === 'V456';
            }) 
            var maxNum = Math.max.apply(Math,trainDetailData.map(item => { return item.train_times }))
            var trainDetailHeaderData = trainDetailData.filter(itm => {
                return maxNum === itm.train_times;
            })
            var xAxisData = trainDetailData.map(i => {return i.train_times})
            xAxisData = xAxisData.sort((a, b) => { return a-b })
            trainScreenOption.title[0].text = '训练精度';
            trainScreenOption.title[1].text = trainDetailHeaderData[0].train_precision + '%';
            trainScreenOption.title[1].textStyle.color = '#3FBC8D';
            trainScreenOption.series[0].itemStyle.color = '#07AB68';
            trainScreenOption.series[0].itemStyle.lineStyle.color = '#07AB68';
            trainScreenOption.series[0].areaStyle.color.colorStops[0].color = 'rgba(7,171,104, .2)'
            trainScreenOption.series[0].areaStyle.color.colorStops[1].color = 'rgba(26, 28, 42, .8)';
            var myChart = echarts.init(this.$refs.frontEndChart);
            myChart.setOption(trainScreenOption);
                // echart图表自适应
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
}
</script>